import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './index.less';
import { login } from '@/api/system';
import { message } from 'antd';
import { history, useModel } from 'umi';

const NormalLoginForm = () => {
  const { setInitialState } = useModel('@@initialState');

  const onFinish = async (values: any) => {
    console.log('Received values of form: ', values);
    const res = await login(values);
    message.success('登录成功！');
    localStorage.setItem('token', 'Bearer ' + res.data.access_token);
    // todo 获取用户信息

    // 设置用户信息
    setInitialState({ userId: 'admin', role: 'admin', permissions: [] });
    history.push('/');
  };

  return (
    <div className="login_page">
      <Form name="normal_login" className="login-form" onFinish={onFinish}>
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="用户名"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default NormalLoginForm;
